<template>
	<view class="payment-container animate-fade-in">
		<!-- 标题栏 -->
		<view class="header">
			<text class="title">课程安排与订购</text>
		</view>

		<!-- 宣传与购买部分 -->
		<view class="promo-section animate-slide-up">
			<text class="promo-line">📅 6-8人小班制教学。</text>
			<text class="promo-line">👩‍🏫 周末1小时主题课程+45分钟绘本小剧场。</text>
			<text class="promo-line">💬 周内1次巩固+1次绘本伴读。</text>
			<text class="promo-line">📖 不定期举办主题派对/绘本观影/节日活动。</text>
			<text class="promo-line">💡 灵活约课。</text>
			<view class="discount-highlight animate-pulse">
				<text class="discount-sub">💵 原价<text class="price faded original-price"> ¥150 / 次</text></text>
				<text class="discount-main">🔥 创始会员专享价 480/月！</text>
				<text class="discount-only">⛽️ 仅限12名</text>
				<text class="discount-button">🎆 一周包括：一次正课，一次绘本小剧场，一次巩固课，一次绘本伴读</text>
			</view>

			<!-- 套餐展示区 -->
			<!-- <view class="package-list">
				<view class="package-item">
					<view class="pkg-top">
						<text class="pkg-title">🎯 10周次课</text>
						<text class="pkg-price">¥1199</text>
					</view>
					<view class="pkg-bottom">
						<text class="pkg-desc">共10周次</text>
						<text class="pkg-sub">平均 ¥120 / 周次</text>
					</view>
				</view>

				<view class="package-item">
					<view class="pkg-top">
						<text class="pkg-title">🌿 20周次课（送1周次）</text>
						<text class="pkg-price">¥2399</text>
						
					</view>
					<view class="pkg-bottom">
						<text class="pkg-desc highlight">✨ 共21周次</text>
						<text class="pkg-sub ">平均 ¥114 / 周次</text>
					</view>
				</view>

				<view class="package-item">
					<view class="pkg-top">
						<text class="pkg-title">🌈 30周次课（送3周次）</text>
						<text class="pkg-price">¥3599</text>
					</view>
					<view class="pkg-bottom">
						<text class="pkg-desc highlight">✨ 共33次</text>
						<text class="pkg-sub ">平均 ¥109 / 周次</text>
					</view>
				</view>

				<view class="package-item">
					<view class="pkg-top">
						<text class="pkg-title">🌟 40周次课（送5周次）</text>
						<text class="pkg-price">¥4799</text>
					</view>
					<view class="pkg-bottom">
						<text class="pkg-desc highlight">✨ 共45次</text>
						<text class="pkg-sub ">平均 ¥106 / 周次</text>
					</view>
				</view>

				<view class="single-class-tip">
					<text>💵 也可按次付费：¥150 / 周次</text>
				</view>
			</view> -->

			<!-- 课包选择 -->
			<!-- <view class="student-section">
				<text class="student-label">📦 选择课包：</text>
				<picker :range="packageList" range-key="label" @change="onPackageChange">
					<view class="picker-box">
						<text v-if="selectedPackageName">{{ selectedPackageName }}</text>
						<text v-else class="placeholder">请选择课包</text>
					</view>
				</picker>
			</view> -->

			<!-- 学生选择 -->
			<view class="student-section">
				<text class="student-label">👧 选择学生：</text>
				<picker :range="students" range-key="studentName" @change="onStudentChange">
					<view class="picker-box">
						<text v-if="selectedStudentName">{{ selectedStudentName }}</text>
						<text v-else class="placeholder">请选择学生</text>
					</view>
				</picker>
			</view>

			<!-- 购买按钮 -->
			<view class="pay-buttons" style="justify-content: center;">
				<button class="pay-btn main-btn" @click="handlePay">立即购买</button>
			</view>
		</view>

		<!-- 补课说明区域 -->
		<view class="section" style="padding: 30rpx;">
			<text class="section-title">📘 补课说明（家长须知）</text>
			<view class="section-content gray-text">
				<view class="item gray-box small-text">
					<view class="sub-item">1️⃣ <text class="sub-title">请假与补课</text></view>
					<view class="sub-item">若需请假，可选择补课一次。</view>
					<view class="sub-item">补课形式：可安排一对一补课30分钟。</view>
					<view class="sub-item">也可选择不补课，我们将在下一次课前进行简要复习，帮助孩子衔接上周次内容。</view>

					<view class="sub-item">2️⃣ <text class="sub-title">退款说明</text></view>
					<view class="sub-item">若不进行补课，我们将退回一次课时费用。</view>

					<view class="sub-item">3️⃣ <text class="sub-title">上课建议</text></view>
					<view class="sub-item">课程内容具有连贯性，我们建议尽量不缺课，以保证学习进度和课堂体验。</view>

					<view class="sub-item">4️⃣ <text class="sub-title">周末与周内课程衔接</text></view>
					<view class="sub-item">如周末主课请假，周内复习课仍可正常参加，帮助孩子保持学习周次奏。</view>
				</view>

				<view class="item gray-box small-text">
					<text class="item-title">🌟 温馨提示</text>
					<view class="sub-item">💬 每一次上课，都是孩子表达与成长的积累。</view>
					<view class="sub-item">📖 每一次复习，都是一次巩固与自信的延伸。</view>
					<view class="sub-item">🌈 我们希望每个孩子都能在持续的学习中，自然爱上英语。</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	import api from '@/api/api.js';

	export default {
		name: 'PaymentPolicyPage',
		data() {
			return {
				students: [], // 学生列表
				selectedStudentId: '',
				selectedStudentName: '',
				outTradeNo: '',
				selectedPackageName: '',
				selectedPackage: null,
				packageList: [{
						label: '10周次课 ¥1199',
						price: 1199,
						count: 10
					},
					{
						label: '20周次课 （送1周次）共21周次 ¥2399',
						price: 2399,
						count: 21
					},
					{
						label: '30周次课 （送3周次）共45周次¥3599',
						price: 3599,
						count: 33
					},
					{
						label: '40周次课（送5周次）共45周次 ¥4799',
						price: 4799,
						count: 45
					},
					{
						label: '单周次课 ¥150',
						price: 150,
						count: 1
					}
				],
			};
		},
		onLoad() {
			// ✅ 页面加载时获取学生信息
			api.getStudent({isTeacher:false}).then(
				res => {
					if (res.code === 200) {
						this.students = res.data || [];
					} else {
						uni.showToast({
							title: res.msg || '获取学生失败',
							icon: 'none'
						});
					}
				},
				() => {
					uni.showToast({
						title: '网络异常',
						icon: 'none'
					});
				}
			);
		},
		methods: {
			onPackageChange(e) {
				const index = e.detail.value;
				this.selectedPackage = this.packageList[index];
				this.selectedPackageName = this.packageList[index].label;
			},
			// ✅ 学生选择事件
			onStudentChange(e) {
				const index = e.detail.value;
				this.selectedStudentName = this.students[index].studentName;
				this.selectedStudentId = this.students[index].id;
			},
			updateOrderStatus(payStatus) {
				api.temporaryCallback({
					"outTradeNo": this.outTradeNo,
					"payStatus": payStatus
				}).then(
					res => {
						uni.showToast({
							title: res,
							icon: 'none'
						});

					},
					rej => {
						console.error('❌ 更新订单状态异常', err);
					}
				);
			},
			// ✅ 通用支付方法
			handlePay(type) {
				if (!this.selectedStudentId) {
					uni.showToast({
						title: '请先选择学生',
						icon: 'none'
					});
					return;
				}

				// if (!this.selectedPackage) {
				// 	uni.showToast({
				// 		title: '请选择课包',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }

				// const priceYuan = this.selectedPackage.price;
				//const desc = this.selectedPackage.label;
				const priceYuan = 480;
				const desc = '包月4次套餐';
				const courseCount = 4;
				const priceFen = Math.round(priceYuan * 100);
				const that = this;
				console.log({
							studentId: this.selectedStudentId,
							payAmount: priceFen,
							goodsDesc: desc,
							courseCount: courseCount
						})
				uni.showModal({
					title: '确认支付',
					content: `确认支付 ¥${priceYuan} 吗？`,
					success: (res) => {
						if (!res.confirm) return;

						api.createOrder({
							studentId: this.selectedStudentId,
							payAmount: priceFen,
							goodsDesc: desc,
							courseCount: courseCount
						}).then(res => {
							if (res.code === 200 && res.data) {
								const data = res.data.wx_response;
								const payData = {
									timeStamp: String(data.timeStamp),
									nonceStr: data.nonceStr,
									package: data.packageStr,
									signType: data.signType || 'RSA',
									paySign: data.paySign
								};

								// that.outTradeNo = res.data.frh_order_no;
								// if (!that.outTradeNo) {
								// 	uni.showToast({
								// 		title: '订单获取失败！',
								// 		icon: 'none'
								// 	});
								// 	return;
								// }

								// ✅ 调用微信支付
								uni.requestPayment({
									provider: 'wxpay',
									...payData,
									success: function(res2) {
										console.log('✅ requestPayment:ok 调用支付成功', res2);
										uni.showToast({
											title: '支付成功',
											icon: 'success'
										});
										// ✅ 更新支付状态为 1（已支付）
										//that.updateOrderStatus(1);
									},
									fail: function(err) {
										console.error('❌ requestPayment:fail', err);
										const msg = err.errMsg || '';

										// === 三种官方返回场景 ===
										if (msg.includes('fail cancel')) {
											console.warn('🚫 用户取消支付');
											//that.updateOrderStatus(2); // 支付失败/取消
											uni.showToast({
												title: '用户取消支付',
												icon: 'none'
											});
										} else if (msg.includes(
												'requestPayment:fail jsapi has no permission'
											)) {
											console.error('🚫 小程序支付权限被限制');
											//that.updateOrderStatus( 2);
											uni.showToast({
												title: '支付权限受限，请联系管理员',
												icon: 'none'
											});
										} else {
											console.error('🚫 支付失败', msg);
											//that.updateOrderStatus(that.outTradeNo, 2);
											uni.showToast({
												title: '支付失败，请重试',
												icon: 'none'
											});
										}
									}
								});
							} else {
								uni.showToast({
									title: res.msg || '获取订单失败',
									icon: 'none'
								});
							}
						}).catch(() => {
							uni.showToast({
								title: '网络异常',
								icon: 'none'
							});
						});
					}
				});
			},

		}
	};
</script>

<style scoped>
	.payment-container {
		display: flex;
		flex-direction: column;
		background: #f9fbf8;
		font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei';
		animation: fadeIn 0.8s ease-in-out;
	}

	.header {
		background: linear-gradient(90deg, #3a6b3f, #5a8f5f);
		padding: 30rpx;
		text-align: center;
		color: #fff;
		font-size: 34rpx;
		font-weight: 700;
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
	}

	.student-section {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 30rpx 20rpx 10rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.student-label {
		font-size: 28rpx;
		color: #315a35;
		font-weight: 600;
	}

	.picker-box {
		font-size: 28rpx;
		color: #333;
		padding: 10rpx 20rpx;
		border-radius: 12rpx;
		background: #f5f5f5;
	}

	.placeholder {
		color: #aaa;
	}

	/* 其他样式保持不变 */
	.promo-section {
		padding: 30rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 20rpx;
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.05);
	}

	.promo-line {
		display: block;
		font-size: 28rpx;
		line-height: 1.6;
		color: #333;
		margin-bottom: 8rpx;
	}

	.discount-highlight {
		margin: 20rpx 0;
		background: #e8f5e9;
		border-left: 8rpx solid #4caf50;
		padding: 20rpx;
		border-radius: 12rpx;
		text-align: center;
	}

	.discount-main {
		font-size: 38rpx;
		font-weight: 700;
		color: #2e7d32;
		display: block;
	}
	
	.discount-button
	{
		font-size: 30rpx;
		font-weight: 700;
		color: #82868b;
		display: block;
	}
	.discount-only{
		font-size: 32rpx;
		font-weight: 700;
		color: #c7a40f;
		display: block;
	}
	.discount-sub {
		font-size: 24rpx;
		color: #555;
	}

	.original-price {
		text-decoration: line-through;
	}

	/* 动画定义 */
	@keyframes fadeIn {
		0% {
			opacity: 0;
			transform: translateY(20rpx);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes slideUp {
		0% {
			opacity: 0;
			transform: translateY(40rpx);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes pulse {

		0%,
		100% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.05);
		}
	}

	@keyframes bounce {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-10rpx);
		}
	}

	.animate-fade-in {
		animation: fadeIn 1s ease-in-out;
	}

	.animate-slide-up {
		animation: slideUp 1s ease-in-out;
	}

	.animate-pulse {
		animation: pulse 2s infinite ease-in-out;
	}

	.animate-bounce {
		animation: bounce 2s infinite ease-in-out;
	}

	.pay-buttons {
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
		margin-top: 20rpx;
	}

	.pay-btn {
		flex: 1;
		font-size: 30rpx;
		color: #fff;
		border-radius: 50rpx;
		padding: 16rpx 0;
		text-align: center;
		box-shadow: 0 6rpx 12rpx rgba(76, 143, 85, 0.3);
	}

	.main-btn {
		background: linear-gradient(90deg, #43a047, #66bb6a);
		font-weight: 700;
	}

	.sub-btn {
		background: linear-gradient(90deg, #b0bec5, #cfd8dc);
		color: #333;
	}

	.package-list {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
		margin: 20rpx 0;
	}
	
	.package-item {
		background: linear-gradient(135deg, #f6fff7, #ffffff);
		border-radius: 16rpx;
		padding: 24rpx 28rpx;
		box-shadow: 0 4rpx 8rpx rgba(76, 175, 80, 0.08);
	}
	
	.pkg-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 6rpx;
	}
	
	.pkg-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #2e7d32;
	}
	
	.pkg-sub {
		font-size: 26rpx;
		color: #666;
	}
	
	.pkg-desc.highlight {
		color: #f4b400;
		font-weight: 800;
		font-size: 30rpx;
	}
	
	.pkg-bottom {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-top: 8rpx;
	}
	
	.pkg-desc {
		font-size: 26rpx;
		color: #777;
	}
	
	.pkg-price {
		font-size: 30rpx;
		font-weight: 700;
		color: #43a047;
	}
	
	.single-class-tip {
		margin-top: 20rpx;
		text-align: center;
		font-size: 28rpx;
		color: #666;
		background: #f9f9f9;
		padding: 20rpx;
		border-radius: 12rpx;
		border: 1rpx dashed #c8e6c9;
	}

</style>